<script lang="ts" setup>
const {icon} = defineProps<{
    title: string
    icon?: string
}>()

const realIconUri = computed(() => {
    return `/static/images/icons/mine/${icon}.png`
})


</script>

<template>
    <view class="item">
        <image src="@/static/images/icons/common/arrow_right.svg" w-14rpx h-24rpx absolute right-28/>
        <image :src="realIconUri" w-38 h-38/>
        <text class="title">
            {{ title }}
        </text>
    </view>
</template>

<style lang="scss" scoped>
.item {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    width: 100%;

    &.last::after {
        content: '';
        left: 11%;
        width: 83%;
        height: 1rpx;
        opacity: 0.3;
        bottom: -20rpx;
        position: absolute;
        background-color: #d7d7d7;
    }

    .title {
        margin-left: 38rpx;
        color: #333333;
        font-size: 30rpx;

        &:not(:last-child)::after {
            content: '';
            width: 100%;
        }
    }
}
</style>
